<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
         <el-form-item label="服务区" prop="status">
            <el-tree-select
              v-model="queryParams.serviceId"
              :data="deptTreeData"
              :props="{ value: 'id', label: 'label', children: 'children' }"
              :render-after-expand="false"
              show-checkbox
              value-key="id"
              check-strictly
              placeholder="请选择服务区"
              class="with-300"
              @check="handleChange"
          />
         </el-form-item>

         <el-form-item label="店铺名称" prop="shopName">
            <el-input
                v-model="queryParams.shopName"
                placeholder="请输入店铺名称"
                clearable
                class="with-240"
            />
          </el-form-item>

         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>

         <el-form-item class="form-right">
            <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['business:shopInfo:add']"
            >新增</el-button>
        
            <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['business:shopInfo:edit']"
            >修改</el-button>

            <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['business:shopInfo:remove']"
            >删除</el-button>
          </el-form-item>
      </el-form>
      
      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="店铺名称" prop="shopName"/>
         <el-table-column label="店长名称" prop="shopManagerName"/>
         <el-table-column label="联系方式" prop="phonenumber"/>
         <el-table-column label="所属服务区" prop="serviceName"/>
         <el-table-column label="所属行政区" prop="provinceName"/>
         <el-table-column label="地址" prop="address"/>
         <el-table-column label="营业时间" prop="businessHours"/>
         <el-table-column label="门店人数" prop="employeeNum"/>
         <el-table-column label="门店面积" prop="shopArea"/>
         <el-table-column label="门店邮箱" prop="email"/>
         <el-table-column label="设备数" prop="deviceNum"/>
         <el-table-column label="用户数" prop="customerNum"/>
         <el-table-column label="创建时间" prop="createTime"/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150px">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:shopInfo:edit']">修改</el-button>
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['business:shopInfo:remove']">删除</el-button>
            </template>
         </el-table-column>
      </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />
      <config-shop :areaData="areaData" @close="close" @submitSuccess="submitSuccess"></config-shop>
   </div>
</template>

<script setup name="Role">
import useUserStore from '@/store/modules/user'
import { getShopList,delShop } from "@/api/system/shop";
import configShop from "./configShop.vue";
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const loading = ref(true);
const shopIds = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    shopName:"",
    serviceId:""
  }
});
const areaData = reactive({
  title:"",
  open: false,
  shopId:""
})

const { queryParams } = toRefs(data);

/** 添加店铺 */
function handleAdd() {
  areaData.open = true;
  areaData.title = "新增店铺";
  areaData.shopId = ""
}

/** 修改店铺 */
function handleUpdate(row) {
  areaData.open = true;
  areaData.title = "修改店铺";
  areaData.shopId = row?.shopId || shopIds.value;
}

/** 删除按钮操作 */
const handleDelete = (row) =>{
  const ids = row?.shopId || shopIds.value
  proxy.$modal.confirm('是否确认删除选中的数据项?').then(() => {
    return delShop(ids);
  }).then((response) => {
    if(response.code == 200){
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }
    else{
      proxy.$modal.msgError(response?.message || "删除失败");
    }
  }).catch(() => {});
}

/** 搜索按钮操作 */
const handleQuery = () =>{
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = ()=> {
  proxy.resetForm("queryRef");
  queryParams.value.serviceId  = deptTreeData.value[0]?.id;
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection)=> {
  shopIds.value = selection.map(item => item.shopId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 查询店铺列表 */
const getList = () =>{
  loading.value = true;
  getShopList(queryParams.value).then(response => {
    if (response.code === 200) {
      tableData.value = response?.rows || [];
      total.value = response?.total || 0;
    }
    loading.value = false;
  }).catch((err) => (loading.value = false));
}

const close = () =>{
  areaData.open = false;
}

const submitSuccess = () =>{
  getList();
  close()
}

const deptTreeData = computed(()=>{
    const data =  useUserStore().deptTreeData
    if(data.length && !queryParams.value.serviceId) {
      queryParams.value.serviceId = data[0].id;
      getList()
    }
    return data
})

const handleChange = (item) =>{
  queryParams.value.serviceId = item.id;
}
</script>

<style lang="scss" scoped>
  .form-right{
    float: right;
  }

</style>
